<template>
	<!-- 任务创建 -->
	<div>
		<el-form :inline="true" ref="ruleForm" :rules="rules" :model="formParams" class="demo-form-inline" label-position="right" label-width="100px">
			<div class="task">
				<Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
				<div class="taskhead">
					<div class="taskheadSon">
						<div class="title">
							<div class = "titleTip"></div>
            				<div class = "titleContent" v-text = "'任务信息'"></div>
						</div>
						<div class="taskMidForm">
							<div style="display:flex;flex-wrap: wrap;">
								<el-form-item label="任务名称:" prop="title">
									<el-input v-model="formParams.title" placeholder="请输入任务名称" maxlength="50" style="width: 460px;" clearable></el-input>
								</el-form-item>
								<el-form-item label="接收单位:" prop="idParams">
									<el-select multiple="" v-model="formParams.idParams" placeholder="请选择" style="width: 460px;">
										<el-option v-for="(item, index) in idParamsOptions" :key="index" :label="item.name" :value="item.id"></el-option>
									</el-select>
								</el-form-item>
							</div>
							<div style="display:flex;flex-wrap: wrap;">
								<el-form-item label="任务类型:" prop="type">
									<el-select v-model="formParams.type" placeholder="请选择" style="width: 460px;">
										<el-option v-for="(item, index) in typeOPtions" :key="index" :label="item.itemName" :value="item.itemValue"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="完成时限:" prop="deadline">
									<el-date-picker :picker-options="deadlinePickerOptions" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择完成时限" v-model="formParams.deadline" style="width: 460px;" clearable></el-date-picker>
								</el-form-item>
							</div>
							<div style="display:flex;flex-wrap: wrap;">
								<el-form-item label="联系人:"  prop="contact">
									<el-input v-model="formParams.contact" placeholder="请输入联系人" style="width: 460px;" clearable></el-input>
								</el-form-item>
								<el-form-item label="联系方式:" prop="contactInfo">
									<el-input v-model="formParams.contactInfo" placeholder="请输入联系方式" style="width: 460px;" clearable></el-input>
								</el-form-item>
							</div>
						</div>

					</div>
				</div>
				<div class="taskhead" style="margin-top:20px;">
					<div class="taskheadSon">
						<div class="title">
							<div class = "titleTip"></div>
            				<div class = "titleContent" v-text = "'任务详情'"></div>
						</div>
						<div class="taskMidForm">
							<el-form-item>
								<quill-editor v-model="formParams.content" />
							</el-form-item>
						</div>

					</div>
				</div>
				<!-- 附件组件 -->
				<!-- 情况通报附件上传 -->
				<div style="margin-top:20px;margin-bottom:60px;">
					<UploadFile 
						:title ="'上传附件'" :subTitle ="'文件仅支持PDF格式'" :showUploadButton ="true"
						:maxNumber ="8" :maxSize = "10" :fileTypes ="['PDF']" 
						:showDleteButton = "true" :fileData = "fileList" :actionUrl = "actionUrl" 
						@deletefile = "deleteFile"
						@uploadsuccess = "uploadSuccess"/>
				</div>
				
				<div class="sureButton">
					<el-button type="reset" @click="reset">取消</el-button>
					<el-button type="primary" @click="onSubmit">提交</el-button>
				</div>
			</div>

		</el-form>
	</div>
</template>
<script>
	import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
	export default {

		components: {
			Breadcrumb,
			UploadFile: () => import('../../comonComponent/uploadFile')
		},
		data() {
			return {
				rules: {
					title: [{ required: true, message: '请输入任务名称', trigger: 'change' }],
					idParams: [{ required: true, message: '请选择接受单位', trigger: 'change' }],
					type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
					deadline: [{ required: true, message: '请选择完成时限', trigger: 'change' }],
					contact: [{ required: true, message: '请输入联系人', trigger: 'change' }],
					contactInfo: [{ required: true, message: '请输入联系方式', trigger: 'change' }],
				},
				formParams: {
					title:'', // 任务名称
					idParams: [], // 接收单位列表
					deadline: "", // 任务截止时间
					contact: "", // 联系人
					contactInfo: "", // 联系方式
					content: "", // 任务详情
					type: "", // 任务类型
				},
				idParamsOptions:[],
				typeOPtions:[],
				Breadcrumb: [{
					name: "监督举报",
					link: ""
				}, {
					name: "专项监督",
					link: ""
				}, {
					name: "任务管理",
					link: ""
				}, {
					name: "新建任务",
					link: ""
				}],
				fileList: [], //	情况通报附件列表
				orgAttachList:[], // 监察建议书附件列表
                deadlinePickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now()
					}
				},
			};
		},
		computed: {
			//图片获取根路径
			actionUrl() {
				return this.Api.uploadFile;
			},
		},
		mounted() {
			this.getNotificationOrgList()
			this.dictList('TASK_TYPE')
		},
		methods: {
			// 字典查询接口
			dictList(typeCode, pItemValue) {
				this.Api.Fenlei({typeCode:typeCode, pItemValue : pItemValue}).then(res =>{
					if(res && res.code === '0') {
						this.typeOPtions = res.data
					} else {
						this.typeOPtions = []
						this.$message.warning(res.message)
					}
					
				})
			},
			// 获取接收单位匹配列表数据
			getNotificationOrgList() {
				this.Api.getSpecialOrglist().then(res => {
					if (res && res.code === '0') {
						this.idParamsOptions = res.data
					} else {
						this.idParamsOptions = []
						this.$message.warning(res.message)
					}
				})
			},
			// 删除文件
			deleteFile (item, index) {
				this.fileList.splice(index, 1)
				this.$message.success(`成功删除文件: ${item.name}`)
			},
			// 文件添加成功
			uploadSuccess (data) {
				this.fileList.push(data)
			},
			//提交
			onSubmit() {
				this.$refs['ruleForm'].validate((valid) => {
					let data = JSON.parse(JSON.stringify(this.formParams))
					data.attachList = this.fileList
					if (valid) {
						if (data.content === '') {
							this.$message.warning('请输入任务详情')
							return
						}
						if (data.attachList.length === 0) {
							this.$message.warning('请输上传附件')
							return
						}
						data.idParams = data.idParams.map(item => {
							item = item.toString()
							return {id: item}
						})
						this.Api.doSpecialAdd(data).then(res => {
							if (res && res.code === '0') {
								this.$message.warning(`新建任务成功`)
								this.$router.go('-1')
							} else {
								this.$message.warning(res.message)
							}
						})
					} else {
						if (data.content === '') {
							this.$message.warning('请输入任务详情')
							return
						}
						if (data.attachList.length === 0) {
							this.$message.warning('请输上传附件')
							return
						}
					}
				})
				

			},
			//取消
			reset() {
				//清空formParams
				this.$router.go('-1')
			},
		}
	};
</script>
<style lang="less" scoped>
	.task {
		width: 100%;
		height: 100%;

		.taskhead {
			background-color: #FFFFFF;

			.taskheadSon {
				padding: 20px;
				.title {
					display: flex;
					padding-bottom: 20px;
					align-items: center;
					.titleTip {
						width: 4px;
						height: 14px;
						background: #3D7fff;
						margin-right: 10px;
					}
					.titleContent {
						font-weight: 600;
						color: #333333;
						font-size: 16px;
						line-height: 16px;
					}
				}
				.taskMidForm {}
			}
		}

		.sureButton {
			position: fixed;
            bottom: 0;
            right: 0;
            width: 100%;
			padding: 10px 20px;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			align-items: center;

		}
	}

	/deep/.el-button--reset {
		width: 70px;
		height: 36px;
		background: rgba(255, 255, 255, 1);
		border-radius: 3px;
		border: 1px solid rgba(215, 219, 224, 1);
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 22px;
		padding: 0px;
	}

	/deep/.el-button--primary {
		width: 70px;
		height: 36px;
		background: rgba(61, 127, 255, 1);
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 22px;
		padding: 0px;
	}
	
	/deep/.el-icon-date{
		padding-left: 430px;
	}
	/deep/.el-input--prefix .el-input__inner {
	    padding-left: 30px; 
	}
	
</style>
